<template>
  <div class="p-4 border-t border-gray-700">
    <div class="bg-gray-800 rounded-lg p-3">
      <textarea 
        v-model="message"
        @keydown.enter.prevent="handleEnterKey"
        placeholder="输入消息内容..." 
        class="w-full bg-transparent resize-none outline-none text-white"
        rows="3"
        ref="textarea"
      ></textarea>
      <div class="flex justify-between pt-2 border-t border-gray-700 mt-2">
        <div class="flex space-x-2">
          <button 
            @click="handleUploadFile" 
            class="p-2 text-gray-400 hover:text-white"
            title="上传文件"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
            </svg>
          </button>
          <button 
            @click="handleUploadImage" 
            class="p-2 text-gray-400 hover:text-white"
            title="上传图片"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
          </button>
          <button 
            @click="handleEmoji" 
            class="p-2 text-gray-400 hover:text-white"
            title="表情"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </button>
        </div>
        <button 
          @click="sendMessage" 
          :disabled="!message.trim()"
          :class="[
            'px-4 py-1 rounded-md font-medium hover:opacity-90 transition-opacity',
            message.trim() 
              ? 'bg-gradient-to-r from-[#8153ff] to-[#93dc24] text-white' 
              : 'bg-gray-700 text-gray-400 cursor-not-allowed'
          ]"
        >
          发送
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

const emit = defineEmits(['send-message']);
const message = ref('');
const textarea = ref(null);

// 处理回车键
const handleEnterKey = (e) => {
  // 如果是 Shift+Enter，添加换行
  if (e.shiftKey) {
    return;
  }
  // 否则发送消息
  sendMessage();
};

// 发送消息
const sendMessage = () => {
  if (message.value.trim()) {
    emit('send-message', message.value);
    message.value = '';
    
    // 聚焦回输入框
    setTimeout(() => {
      if (textarea.value) {
        textarea.value.focus();
      }
    }, 0);
  }
};

// 上传文件
const handleUploadFile = () => {
  // 这里将来会添加文件上传逻辑
  alert('文件上传功能即将上线');
};

// 上传图片
const handleUploadImage = () => {
  // 这里将来会添加图片上传逻辑
  alert('图片上传功能即将上线');
};

// 表情选择
const handleEmoji = () => {
  // 这里将来会添加表情选择逻辑
  alert('表情选择功能即将上线');
};
</script>

<style scoped>
</style> 